<template>
	<view>
		<u-code ref="uCode" @change="codeChange"></u-code>
		<view class="Top">
			<image src="/static/logo.png"
				style="width: 160rpx;height: 160rpx;border-radius: 50%;border: 2px solid #F2D7AA;" mode=""></image>
			<view class="Title">
				找回密码
			</view>
		</view>
		<view class="Form">
			<view class="Item">
				<view class="Left">
					+86
				</view>
				<view class="Input">
					<u-input placeholder="请输入手机号" placeholder-style="color: #999999;font-weight: 400;" border="none"
						color="#fff" v-model="mobile"></u-input>
				</view>
			</view>
			<view class="Item">
				<view class="Left">
					验证码
				</view>
				<view class="Input">
					<u-input password placeholder="请输入验证码" placeholder-style="color: #999999;font-weight: 400;"
						border="none" color="#fff" v-model="Code"></u-input>
					<view class="Code" @click="getCode">
						{{tips}}
					</view>
				</view>
			</view>
			<view class="Item">
				<view class="Left">
					新密码
				</view>
				<view class="Input">
					<u-input password placeholder="请输入新密码" placeholder-style="color: #999999;font-weight: 400;"
						border="none" color="#fff" v-model="newpwd"></u-input>
				</view>
			</view>
		</view>

		<view class="Btn">
			<view class="BtnC" @click="Submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				maxMobile: 11,
				tips: '',
				Code: '',
				newpwd: '',
				mobile: '', // 用户手机号
				code: '', // 短信验证码
				user_wx_id: '', //授权id
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				btnb: 'btn btn-square btn-c btn-all', //按钮背景
				type: '', // 有值是第三方登录账号绑定
				isWeixinBrowser: this.$common.isWeiXinBrowser()
			};
		},
		onLoad(option) {
			if (option.user_wx_id) {
				this.user_wx_id = option.user_wx_id;
				uni.setNavigationBarTitle({
					title: '绑定手机号'
				});
			}
		},
		computed: {
			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else {
					res.status = true;
				}
				return res;
			},
			// 动态计算发送验证码按钮样式
			sendCodeBtn() {
				let btn = 'btn btn-g';
				if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
					return btn + ' btn-b';
				} else {
					return btn;
				}
			},
			// 动态更改登录按钮bg
			regButtonClass() {
				return this.mobile && this.mobile.length === this.maxMobile && this.code ? this.btnb + ' btn-b' : this
					.btnb;
			},
			logoImage() {
				return this.$store.state.config.shop_logo;
			}
		},
		onShow() {
			let _this = this;
			let userToken = _this.$db.get('userToken');
			if (userToken) {
				uni.navigateTo({
					url: '/pages/member/index/index'
				});
				return true;
			}
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
		},
		methods: {
			getCode() {
				let yz = /^(13[0-9]|14[5,6,7,8,9]|15[0-3,5-9]|16[2,5,6,7]|17[0,1,3,5,6,7,8]|18[0-9]|19[1,3,5,8,9])\d{8}$/
				if (yz.test(this.mobile)) {
					let that = this
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$api.sms({
							mobile: that.mobile,
							code: 'veri'
						}, res => {
							uni.hideLoading();
							if (res.status) {
								uni.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							} else {
								uni.$u.toast(res.msg);
							}
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确的手机号码')
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			Gologin() {
				uni.redirectTo({
					url: './index1'
				})
			},
			GoReg() {
				uni.redirectTo({
					url: '/pages/reg/reg'
				})
			},
			GoZH() {
				uni.redirectTo({
					url: '/pages/forgot/forgot'
				})
			},
			Submit() {
				let data = {
					mobile: this.mobile,
					code: this.Code,
					newpwd: this.newpwd,
				}
				this.$api.userForgetpwd(data, res => {
					if (res.status) {
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login/index1'
							})
						})
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 发送短信验证码
			sendCode() {
				if (!this.rightMobile.status) {
					this.$common.errorToShow(this.rightMobile.msg);
				} else {
					this.$common.loadToShow('发送中...');
					setTimeout(() => {
						this.$common.loadToHide();
						this.$api.sms({
							mobile: this.mobile,
							code: 'login'
						}, res => {
							if (res.status) {
								this.timer = 60;
								this.verification = false;
								this.$common.successToShow(res.msg);
								this.countDown(); // 执行验证码计时
								// this.btnb = 'btn btn-square btn-all btn-b';
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
					}, 1000);
				}
			},
			// 去注册
			toReg() {
				this.$common.redirectTo('/pages/login/register/index');
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
			// 登录
			login() {
				var _this = this;
				if (!_this.rightMobile.status) {
					_this.$common.errorToShow(_this.rightMobile.msg);
				} else {
					// 短信验证码登录
					if (!_this.Code) {
						_this.$common.errorToShow('请输入短信验证码!');
					} else {
						let data = {
							mobile: _this.mobile,
							code: _this.Code
						};

						let invicode = _this.$db.get('invitecode');
						if (invicode) {
							data.invitecode = invicode;
						}

						_this.$api.smsLogin(data, res => {
							if (res.status) {
								this.$db.set('userToken', res.data);
								_this.redirectHandler();
							} else {
								_this.$common.errorToShow(res.msg);
							}
						});
					}
				}
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$common.successToShow('登录成功!', () => {
					this.$db.set('timer', 0);
					this.$db.del('invitecode');
					// this.handleBack();
					uni.navigateBack({
						delta: 1
					});
				});
			},
			// 跳转到普通登录
			toLogin() {
				uni.navigateTo({
					url: '../../login/login/index'
				});
			},
			//提交按钮
			showTopTips: function() {
				let _this = this;
				if (_this.mobile == '') {
					_this.$common.errorToShow('请输入手机号码');
					return false;
				}
				if (this.code == '') {
					_this.$common.errorToShow('请输入验证码');
					return false;
				}
				if (_this.user_wx_id == 0) {
					_this.$common.errorToShow('登录失败，请稍后再试', function() {
						uni.navigateBack({
							delta: 1
						});
					});
					return false;
				}
				var platform = 2;
				//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
				// #ifdef MP-ALIPAY
				platform = 3;
				// #endif
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				platform = 4;
				// #endif
				var data = {
					mobile: _this.mobile,
					code: _this.code,
					platform: platform, //平台id，标识是小程序登陆的
					user_wx_id: _this.user_wx_id //微信小程序接口存不了session，所以要绑定的id只能传到前台
				};
				//有推荐码的话，带上
				var invitecode = _this.$db.get('invitecode');
				if (invitecode) {
					data.invitecode = invitecode;
				}
				_this.$api.smsLogin(data, function(res) {
					if (res.status) {
						_this.$db.set('userToken', res.data);
						_this.redirectHandler();
					} else {
						//报错了
						_this.$common.errorToShow(res.msg);
					}
				});
			},
			// 微信小程序第三方登录账号绑定
			toBind() {
				if (this.mobile == '') {
					this.$common.errorToShow('请输入手机号码');
					return false;
				}
				if (this.code == '') {
					this.$common.errorToShow('请输入验证码');
					return false;
				}

				let data = {
					mobile: this.mobile,
					code: this.code,
					user_wx_id: this.user_wx_id
				};

				// 获取邀请码
				let invicode = this.$db.get('invitecode');
				if (invicode) {
					data.invitecode = invicode;
				}

				this.$api.smsLogin(data, res => {
					if (res.status) {
						this.$db.set('userToken', res.data);
						this.redirectHandler();
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			// 切换登录方式
			selectLoginType() {
				this.$common.redirectTo('./index1');
			},
			// 跳转到用户协议
			goAgreement() {
				let articleId = this.$store.state.config.user_agreement_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			// 跳转到隐私政策
			goPrivacy() {
				let articleId = this.$store.state.config.privacy_policy_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			goForgetpwd() {
				this.$common.navigateTo('/pages/login/forget/forget');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.Top {
		padding-top: 213rpx;
		text-align: center;

		.Title {
			margin-top: 30rpx;
			margin-bottom: 116rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}

	.Form {
		padding: 0 60rpx;

		.Item {
			display: flex;
			align-items: flex-start;
			height: 93rpx;
			border-bottom: 1rpx solid #b9b9b950;
			margin-bottom: 48rpx;

			.Left {
				width: 110rpx;
				font-weight: bold;
				color: #fff;
				margin-right: 30rpx;
			}

			.Input {
				display: flex;
				align-items: flex-start;
				font-weight: bold;
				color: #202126;

				.Code {
					font-size: 24rpx;
					color: #181818FF;
					width: 166rpx;
					height: 60rpx;

					background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
					border-radius: 10rpx;
					line-height: 60rpx;
					text-align: center;
					font-weight: 400;
				}
			}
		}

		.ChangeLogin {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.GoSMS {
				font-weight: bold;
				font-size: 32rpx;
				color: #F24C22;
			}

			.Forgot {
				color: #202126;
			}
		}
	}

	.Btn {
		margin-top: 231rpx;
		text-align: center;
		margin-left: 61rpx;
		margin-right: 61rpx;

		.BtnC {
			width: 629rpx;
			height: 95rpx;
			background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
			opacity: 1;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #181818FF;
			text-align: center;
			line-height: 95rpx;
		}

		.GoReg {
			margin-top: 30rpx;
			color: #202126;
		}
	}
</style>